<admintpl file="header"/>
<style>
    .file-upload-btn-wrapper {
        margin-bottom: 10px;
    }

    .file-upload-btn-wrapper .num {
        color: #999999;
        float: right;
        margin-top: 5px;
    }

    .file-upload-btn-wrapper .num em {
        color: #FF5500;
        font-style: normal;
    }

    .files-wrapper {
        border: 1px solid #CCCCCC;
    }

    .files-wrapper ul {
        height: 280px;
        overflow-y: scroll;
        padding-bottom: 10px;
        position: relative;
        margin: 0;
    }

    .files-wrapper li {
        display: inline;
        float: left;
        height: 100px;
        margin: 10px 0 0 10px;
        width: 100px;
        position: relative;
        border: 1px solid #CCCCCC;
    }

    .files-wrapper li.selected {
        border: 1px solid #fe781e;
    }

    .files-wrapper li .upload-percent {
        width: 100%;
        height: 100%;
        line-height: 100px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .files-wrapper li .selected-icon-wrapper {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        font-size: 16px;
        text-align: center;
        line-height: 20px;
        color: #fe781e;
        display: none;
    }

    .files-wrapper li.selected .selected-icon-wrapper {
        display: block;
    }

    .files-wrapper li img {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
</style>
<script>
    function get_selected_files() {
        var tab = $("#uploader-tabs li.active").data('tab');
        var files = [];
        if (tab == 'upload-file') {
            var $files = $('#files-container li.uploaded.selected');
            if ($files.length == 0) {
                alert('请上传文件！');
                return false;
            }
            $files.each(function () {
                var $this = $(this);
                var url = $this.data('url');
                var preview_url = $this.data('preview_url');
                var filepath = $this.data('filepath');
                var name = $this.data('name');
                var id = $this.data('id');
                files.push({url: url, preview_url: preview_url, filepath: filepath, name: name, id: id});
            });
        }
        if (tab == 'network-file') {
            var url = $('#network-file-input').val();
            if (url == '') {
                alert('请填写文件地址！');
                return false;
            }
            var id = "networkfile" + new Date().getTime();
            files.push({url: url, preview_url: url, filepath: url, id: id});
        }
        return files;
    }
</script>
</head>
<body>
<div class="wrap" style="padding: 5px;">
    <ul class="nav nav-tabs" id="uploader-tabs">
        <li class="active" data-tab="upload-file"><a href="#upload-file-tab" data-toggle="tab">上传文件</a></li>
        <li data-tab="network-file"><a href="#network-file-tab" data-toggle="tab">网络文件</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="upload-file-tab">
            <div class="file-upload-btn-wrapper">
                <!--选择按钮-->
                <div id="container" style="display: inline-block;">
                    <a class="btn btn-primary" id="select-files">
                        选择文件
                    </a>
                </div>
                <span class="num">
						<empty name="multi">
							最多上传<em>1</em>个附件,
						</empty>
						单文件最大<em>{$upload_max_filesize_mb}MB</em>,
						<em style="cursor: help;" title="可上传格式：{$extensions}" data-toggle="tooltip">支持格式？</em>
					</span>
            </div>
            <div class="files-wrapper">
                <ul id="files-container">
                </ul>
            </div>
        </div>
        <div class="tab-pane" id="network-file-tab">
            请输入网络地址<br>
            <input type="text" name="info[filename]" style="width: 600px;" placeholder="http://"
                   id="network-file-input">
        </div>
    </div>
</div>
<script>
    var multi = {$multi};
    var mime_type = {$mime_type};
    var extensions = mime_type.extensions.split(/,/);
    var mimeTypeRegExp = new RegExp('\\.(' + extensions.join('|') + ')$', 'i');

    Wind.use('plupload', function () {
        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'select-files', // you can pass an id...
            container: document.getElementById('container'), // ... or DOM Element itself
            url: "{:U('asset/asset/plupload')}",
            flash_swf_url: '__PUBLIC__/js/plupload/Moxie.swf',
            silverlight_xap_url: '__PUBLIC__/js/plupload/Moxie.xap',
            filters: {
                max_file_size: '{$upload_max_filesize_mb}mb'/* ,
                 mime_types: [{$mime_type}] */
            },
            multi_selection: {$multi},
            multipart_params: {
                app: '{$app}'
            },
            init: {
                PostInit: function () {
                },

                FilesAdded: function (up, files) {
                    plupload.each(files, function (file) {
                        var $newfile = $('\
									<li class="selected">\
										<div class="selected-icon-wrapper"><i class="fa fa-check-circle"></i></div>\
										<div class="upload-percent">0%</div>\
									</li>');
                        $newfile.attr('id', file.id);
                        $('#files-container').append($newfile);
                        $newfile.on('click', function () {
                            var $this = $(this);
                            $this.toggleClass('selected');
                        });
                    });
                    uploader.start();
                },

                UploadProgress: function (up, file) {
                    $('#' + file.id).find('.upload-percent').text(file.percent + "%");
                },

                FileUploaded: function (up, file, response) {
                    var data = JSON.parse(response.response);
                    if (data.status == 1) {
                        if (!multi) {
                            $('#select-files').css('visibility', 'hidden');
                            $('#container').css('visibility', 'hidden');
                        }
                        var $file = $('#' + file.id);
                        $file.addClass('uploaded')
                                .data('id', file.id)
                                .data('url', data.url)
                                .data('preview_url', data.preview_url)
                                .data('filepath', data.filepath)
                                .data('name', data.name);

                        if (data.url.match(/\.(jpeg|gif|jpg|png|bmp|pic)$/gi)) {
                            var $img = $('<img/>');
                            $img.attr('src', data.url);
                            $file.find('.upload-percent')
                                    .html($img);
                        } else {
                            $file.find('.upload-percent').attr('title', data.name).text(data.name);
                        }
                    } else {
                        alert(data.message);
                        $('#' + file.id).remove();
                    }
                },

                Error: function (up, err) {
                }
            }
        });

        plupload.addFileFilter('mime_types', function (filters, file, cb) {
            if (!mimeTypeRegExp.test(file.name)) {
                this.trigger('Error', {
                    code: plupload.FILE_EXTENSION_ERROR,
                    message: plupload.translate('File extension error.'),
                    file: file
                });
                alert("此文件类型不能上传!\n" + file.name);
                cb(false);
            } else {
                cb(true);
            }
        });


        uploader.init();

    });
</script>
</body>
</html>